<template>
	<div class="pages">
		<el-carousel height="372px">
			<el-carousel-item v-for="item in 4" :key="item">

				<img src="@/assets/images/bg.png" />
			</el-carousel-item>
		</el-carousel>


		<div style="text-align: center;margin:60px 0;">
			<img src="@/assets/images/title_1.png" style="width: 144px;height: 50px;" />
		</div>


		<div class="contents flex course flex-row-between">
			<div>
				<img src="@/assets/images/course_1.png" />
				<div>我的课程</div>
			</div>
			<div>
				<img src="@/assets/images/course_2.png" />
				<div>直播课程</div>
			</div>
			<div>
				<img src="@/assets/images/course_3.png" />
				<div>课程学习</div>
			</div>
		</div>



		<div style="text-align: center;margin: 60px 0;">
			<img src="@/assets/images/title_2.png" style="width: 144px;height: 50px;" />
		</div>

		<div class="contents">
			<el-carousel @change="changeCarousel" :autoplay="false" indicator-position="none" type="card"
				height="320px">
				<el-carousel-item v-for="(item,index) in 6" :key="item">
					<div class="box" :class="active==index?'change':''">
						1111
					</div>
				</el-carousel-item>
			</el-carousel>
		</div>
		
		
					
					
		<div style="text-align: center;margin: 60px 0;">
			<img src="@/assets/images/title_1.png" style="width: 144px;height: 50px;" />
		</div>


	

		<div class="course_bg">
			<div class="course_2 flex">
				<div class="flex-1"></div>
				<div class="flex-1">
				<div v-for="(item,index) in courseList" :key="index">
				   <div style="width: 200px;height: 200px;">
					   {{ item.title }}
				   </div>
				</div>

				</div>
			</div>

		</div>




	</div>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				courseList: [{
					title: '教师证'
				}, {
					title: '教师证1'
				}, {
					title: '教师证2'
				}, {
					title: '教师证3'
				}]
			}
		},
		methods: {
			changeCarousel(e) {
				this.active = e
			}
		}
	}
</script>

<style>
	.contents {
		width: 1200px;
		margin: auto;

	}
</style>
<style scoped lang="scss">
	.course {
		>div {
			width: 248px;
			height: 228px;
			background: rgba(255, 255, 255, 0.39);
			box-shadow: 0px 2px 16px rgba(197, 197, 197, 0.3);
			opacity: 1;
			border-radius: 10px;
			text-align: center;
			font-size: 33px;
			font-weight: bold;
			color: #333333;
			cursor: pointer;
		}

		img {
			margin: 20px 0;
		}

	}

	.box {
		width: 348px;
		height: 320px;
		background: #f1f1f1;
		opacity: 1;
		border-radius: 10px;
		margin: 0 120px;
	}

	.change {
		background: #1480F9;

	}

	.course_2 {
		width: 748px;
		height: 440px;
		background: #fff;
		box-shadow: 0px 0px 20px rgba(202, 202, 202, 0.3);
		opacity: 1;
		border-radius: 0px 220px 220px 0px;
		position: relative;
		z-index: 99;
		bottom: 80px;
	}

	.course_bg {
		background: #FAFAFA;
		opacity: 1;
		height: 300px;
		margin-top: 200px;

	}
</style>
